@using Page = viBook.Models.Page
@model Page
@{
    ViewBag.Title = "Edit Page Detail";
    Layout = "~/Views/Shared/_UserLayout.cshtml";
}
@section HeadContent{
    <script src="../../Content/tapmodo-Jcrop-5e58bc9/js/jquery.Jcrop.min.js" type="text/javascript"> </script>
    <link href="../../Content/tapmodo-Jcrop-5e58bc9/css/jquery.Jcrop.css" rel="stylesheet"
        type="text/css" />
    <link href="../../Content/Tag.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/Custom.css" rel="stylesheet" type="text/css" />
    <script src="../../Content/jquery.fancybox-1.3.4/jquery.fancybox-1.3.4.js" type="text/javascript"> </script>
    <link href="../../Content/jquery.fancybox-1.3.4/jquery.fancybox-1.3.4.css" rel="stylesheet"
        type="text/css" />
    <script src="../../Content/Agile-Carousel/agile_carousel.alpha.js" type="text/javascript"></script>
    <link href="../../Content/Agile-Carousel/agile_carousel.css" rel="stylesheet" type="text/css" />
    <script src="https://www.google.com/jsapi?key=ABQIAAAAHnrv40LDgOtv4rSQy1b8fRTLVLcwd-KOtl51WFBxK6nY0KXPzhQz4hZL4epP2u4jnJh73v4hV_6pIw"> </script>
}
<script src="../../Scripts/jquery.carouFredSel-4.4.3.js" type="text/javascript"></script>
<style type="text/css">
    .transparent_top.p1
    {
        background-position: 0 -30px;
    }
    .transparent_top
    {
        height: 30px;
    }
    .transparent_top, .transparent_bottom
    {
        background: url(../../Content/transparent_top_bottom.png) 0 0 no-repeat transparent;
    }
    .transparent
    {
        background: url(../../Content/transparent_bg.png) 0 0 repeat-y transparent;
    }
    .transparent_bottom
    {
        background-position: 0 -90px;
        height: 10px;
    }
    
    .transparent_top, .transparent_bottom
    {
        background: url(../../Content/transparent_top_bottom.png) 0 0 no-repeat transparent;
    }
    
    .transparent, .transparent_top, .transparent_bottom, .transparent_schoolboard
    {
        margin: 0 -10px;
        padding: 0 10px;
    }
    .image_carousel
    {
        padding: 15px 0 0px 30px;
        position: relative;
    }
    .image_carousel img
    {
        border: 1px solid #ccc;
        background-color: white;
        padding: 9px;
        margin: 7px;
        display: block;
        float: left;
    }
    a.prev, a.next
    {
        background: url(../../Content/miscellaneous_sprite.png) no-repeat transparent;
        width: 45px;
        height: 50px;
        display: block;
        position: absolute;
        top: 85px;
    }
    a.prev
    {
        left: -22px;
        background-position: 0 0;
    }
    a.prev:hover
    {
        background-position: 0 -50px;
    }
    a.next
    {
        right: -30px;
        background-position: -50px 0;
    }
    a.next:hover
    {
        background-position: -50px -50px;
    }
    
    a.prev span, a.next span
    {
        display: none;
    }
    .pagination
    {
        text-align: center;
    }
    .pagination a
    {
        background: url(../../Content/miscellaneous_sprite.png) 0 -100px no-repeat transparent;
        width: 15px;
        height: 80px;
        margin: 0 5px 0 0;
        display: inline-block;
    }
    .pagination a.selected
    {
        background-position: -25px -100px;
        cursor: default;
    }
    .pagination a span
    {
        display: none;
    }
    .clearfix
    {
        float: none;
        clear: both;
    }
</style>
<div class="full">
    <div id="screenshot-title-section" class="full title">
        <div class="single-title vcard group">
            <a href="#" class="url">
                <img alt="@Model.Chapter.ChapterName" class="photo fn" src="@Model.Chapter.ChapterImage" />
            </a>
            <h1>@Html.ActionLink(Model.Chapter.ChapterName, "Details", "Chapters", new { id = Model.ChapterId }, null)</h1>
            <div class="shot-byline">
                <a href="#" title="@Model.Chapter.Book.Title" class="url" rel="contact">
                    <img alt="book" class="photo fn" style="width: 32px" src="@Model.Chapter.Book.CoverUrl">
                    @Html.ActionLink(Model.Chapter.Book.Title, "Details", "Books", new { id = Model.Chapter.BookId }, null)</a>
                <span class="shot-byline-user"></span>
            </div>
        </div>
    </div>
    <div class="transparent_top p1">
    </div>
    <div class="transparent p1">
        <div class="image_carousel">
            <div id="foo2" data-bind="template: {name:'AllPageTemplate', foreach: allPagesCollection}">
            </div>
            <div class="clearfix">
            </div>
            <a class="prev" id="foo2_prev" href="#"><span>prev</span></a> <a class="next" id="foo2_next"
                href="#"><span>next</span></a>
        </div>
    </div>
    <div class="transparent_bottom">
    </div>
    <div id="book-wrapper">
        <div>
            <input id="button-init-tag" type="button" class="form-sub" data-bind="click: createNewTag"
                value="Tag picture" />
            <a id="button-save-tag" href="#add-tag-modal" class="form-sub" style="display: none"
                type="button" data-bind="click: saveTag">Save</a>
            <input id="button-destroy-tag" class="form-btn" style="display: none" type="button"
                data-bind="click: cancelTag" value="Cancel" />
            <input id="button-save-all" type="button" class="form-sub" data-bind="click: saveAll, visible:isShowButtonSaveAll()"
                style="display: none" value="Save all edited tags" />
            <br />
            <span data-bind="text: addedTags().length + ' pending added Tags', visible:addedTags().length > 0">
            </span>
            <br />
            <span data-bind="text: deletedTags().length + ' pending deleted Tags', visible:deletedTags().length > 0">
            </span>
        </div>
    </div>
    <div data-bind="template: {name:'TagTemplate', foreach: tagCollection}">
    </div>
    <div data-bind="template:{name:'ChapterTemplate',foreach:picture}">
    </div>
    <div id="add-tag-modal" style="display: none">
        Written text language
        <select data-bind="options: convertLanguages, optionsText: 'displayName', value: selectedConvertLanguage">
        </select>
        <a id="button-convert" class="form-sub" data-bind="click: convert" style="font-size: 1.2em;"
            href="#">Convert</a>
        <br />
        <br />
        @Html.TextArea("converted-text", string.Empty, 3, 9, new { @style = "width:460px" })
        <br />
        <br />
        <select data-bind="options: languages, optionsText: 'displayName', value: selectedLanguageFrom">
        </select>
        To:
        <select data-bind="options: languages, optionsText: 'displayName', value: selectedLanguageTo">
        </select>
        <a id="translate-button" class="form-sub" data-bind="click: translate" style="font-size: 1.2em;"
            href="#">Translate</a>
        <br />
        <br />
        @Html.TextArea("translated-text", string.Empty, 3, 9, new { @style = "width:460px" })
        <br />
        <br />
        <a id="button-finish-save-tag" class="form-sub" data-bind="click: finishSaveTag"
            style="font-size: 1.2em;" href="#">Save</a> <a id="button-cancel-save-tag" class="form-sub"
                data-bind="click: cancelSaveTag" style="font-size: 1.2em;" href="#">Cancel</a>
    </div>
</div>
@Html.Partial("EditJS")
<style>
    div#add-tag-modal select
    {
        padding: 5px 8px;
        font-family: "Helvetica Neue" , Helvetica, Arial, sans-serif;
        font-size: 1.4em;
        color: #333;
        border-top: 1px solid #c3c3c3;
        border-left: none;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        background: #e3e3e3 url(../images/formbg.gif) repeat-x top left;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    
    div#add-tag-modal textarea
    {
        width: 400px;
        height: 100px;
        padding: 5px 8px;
        font-family: "Helvetica Neue" , Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 1.4;
        color: #333;
        border-top: 1px solid #c3c3c3;
        border-left: 1px solid #c3c3c3;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        background: #e3e3e3 url(../images/formbg.gif) repeat-x top left;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    
    div#add-tag-modal input.form-text:focus, div#add-tag-modal select:focus, div#add-tag-modal textarea:focus
    {
        border-color: #777;
        background: #fff;
        outline-width: 0;
    }
    
    .tag-btn
    {
        padding: 7px 12px;
        font-family: "Helvetica Neue" , Helvetica, Arial, sans-serif;
        font-size: .9em;
        font-weight: bold;
        text-decoration: none;
        color: #fff;
        border: none;
        background: #000 url(../images/glass-light.png) repeat-x 0 75%;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    
    .tag-btn:hover
    {
        text-decoration: none;
        color: #000;
        background-color: #D3D3D3;
    }
    
    .tag-btn:active
    {
        text-decoration: none;
        background-color: #D3D3D3;
    }
</style>
